<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>{$detail.title}</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="/assets/css/project.css">
    <script src="http://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
    <script src="http://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<style>
    img {
        max-width: 100%;
    !important;
    }

    .project-detail-param {
        font-size: 10px;
        color: #0f0f0f;
        margin-top: 20px;
        width: 100%;
        height: 25px;
    }

    .detail-params {
        /*margin-left: px;*/
        font-size: 15px;
        float: left;
    }

    .detail-params b {
        margin-left: 5px;
    }

    .projext-detail {
        font-size: 15px;
        width: 100%;
        padding-top: 10px;
    }

    .detail-main {
        margin-bottom: 80px;
    }

    .footer {
        position: fixed;
        bottom: 0;
        width: 100%;
        background-color: #0a53be;
        color: #fff;
        text-align: center;
        /*margin: 20px;*/
        height: 8%;
        font-size: 20px;
    }
</style>
<body>
<div class="detail-main">
    <div style="height: 50px; background-color: #0a5ba6;width: 100%;color: #FFFFFF">
        <div class="header-text">
            <div style="width: 20%;float: left;padding-top: 18px;padding-left: 10px;" onclick="history.go(-1)">
                <&nbsp;返回
            </div>
            <div style="padding-top: 18px;float: right;padding-left: 75px;width: 80%;">活动详情</div>
        </div>
    </div>
    <div id="slidershow"
         class="carousel slide"
         data-ride="carousel"
         data-pause="hover"
         data-wrap="true"
         data-interval="2000"
         data-auto="true"
         style="width: 100%;height: 100%; padding:10px 10px;"
    >
        <!-- 设置图片轮播的顺序 -->
        <ol class="carousel-indicators">

            <li class="active" data-target="#slidershow" data-slide-to="0"></li>
            <li data-target="#slidershow" data-slide-to="1"></li>
            <li data-target="#slidershow" data-slide-to="2"></li>

        </ol>
        <!-- 设置轮播图片 -->
        <div class="carousel-inner" style="border-radius: 10px">
            {volist name="detail.thumbimages" id="vmg"}
            <div class="item {if $key==1}active{/if}">
                <a href="##"><img width="100%" src="{$vmg}" alt=""></a>
            </div>
            {/volist}
        </div>
    </div>
    <div class="row box">
        <div style="margin: 20px" ;>
            <h1 style="margin-top:20px;font-size: 20px;color: #ff5500">
                {$detail.title}&nbsp;&nbsp;
                {if $detail['status']==0}
                <span class="badge">未开始</span>
                {elseif $detail.status==1/}
                <span class="badge" style="background-color: #d9534f">进行中</span>
                {else/}
                <span class="badge" style="background-color: #5cb85c">已结束</span>
                {/if}
            </h1>
            <div class="project-detail-param">
                <span class="detail-params" style="padding-left: 0px;width:30%;">额度:<b style="color: red;">￥{$detail.unit_price}</b></span>
                <span class="detail-params" style="width: 20%">总计:<b>{$detail.unit_num}</b></span>
                <span class="detail-params" style="20%">剩余:<b>{$detail.sy_unit}</b></span>
                <span class="detail-params" style="width: 30%">浏览:<b>{$detail.hits}</b></span>
            </div>
            <div class="detail-buy" style="width: 100%;margin-top:10px;">
                <span style="float: left;width: 15%">进度：</span>
                <div class="progress" style="height: 15px;width: 85%">
                    <div class="progress-bar"
                         role="progressbar"
                         aria-valuenow="{$jd}"
                         aria-valuemin="0"
                         aria-valuemax="100"
                         style="width: {$jd}%;font-size: 15px;text-align:center;">
                        {$jd}%
                    </div>
                </div>

            </div>
            <div class="detail-buy" style="width: 100%;margin-top:5px;">
                <span style="float: left;width: 15%">认筹：</span>
                <div class="input-group" style="height: 20px;width: 120px;">
                    <div class="input-group-btn" onclick="cutOne()">
                        <button class="btn btn-white btn-minuse" type="button">-</button>
                    </div>
                    <input type="text" id="pics" class="form-control no-padding add-color text-center height-20"
                           maxlength="3"
                           value="1">
                    <div class="input-group-btn" onclick="addOne()">
                        <button class="btn btn-red btn-pluss" type="button">+</button>
                    </div>
                </div><!-- /input-group -->
                <!--                <input type="number" id="pics" class="input-mini" value="1" style="float: left;width: 30px;height: 20px;">&nbsp;&nbsp;单-->
            </div>
            <br>
            <div class="project-title" style="margin-top: 20px;">
                <span class="project-title-border">&nbsp;</span>
                <span class="project-title-text">项目详情</span>
            </div>
            <div class="projext-detail">
                {$detail.content}
            </div>
            <div class="project-title" style="margin-top: 20px;">
                <span class="project-title-border">&nbsp;</span>
                <span class="project-title-text">预约记录</span>
            </div>
            <div class="projext-detail">
                {if !empty($orderList)}
                <table class="table">
                    <tr>
                        <th>姓名</th>
                        <th>电话</th>
                        <th>单数</th>
                        <th>时间</th>
                    </tr>
                    {volist name="orderList" id="vo"}
                    <tr>
                        <td>{:str_replace(mb_substr($vo['name'],1,1),"*",$vo.name)}</td>
                        <td>{:str_replace(mb_substr($vo['tel'],3,4),"****",$vo.tel)}</td>
                        <td>{$vo.unit_num}</td>
                        <td>{$vo.update_time_text}</td>
                    </tr>
                    {/volist}
                </table>
                {else/}
                {/if}
            </div>
        </div>
    </div>
</div>

<button class="btn btn-primary btn-lg footer" data-toggle="modal" data-target="#myModal">
    开始认筹
</button>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="myModalLabel">填写信息</h4>
            </div>
            <div class="modal-body">
                姓名：<input type="text" id="name" class="form-control">
                手机：<input type="text" id="tel" class="form-control">
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" onclick="submitForm()">提交</button>
            </div>
        </div>
    </div>
</div>
<script>
    function submitForm() {
        var pics = $('#pics').val();
        var name = $('#name').val();
        var tel = $('#tel').val();
        var project_id = "{$detail.id}";
        if (!pics || !name || !tel) {
            /*<button type="button" className="btn btn-default" data-container="body" data-toggle="popover"
                    data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
                Popover on 顶部
            </button>*/
            /* $(this).popover({
                 content:"请把信息填写完全",
                 placement:"top"
             }).show();*/
            alert('请把信息填写完全');
            return false;
        }
        $.ajax({
            url: "{:url('index/addOrder')}",
            type: "POST",
            data: {pics: pics, name: name, tel: tel, project_id: project_id},
            success: function (res) {
                alert(res.msg);
                if (res.code == 1) {
                    window.location.reload()
                }

            }
        });
    }

    function addOne() {
        var vals = $('#pics').val();
        console.log(vals)
        $('#pics').val(parseInt(vals) + 1);
    }

    function cutOne() {
        var vals = $('#pics').val();
        if (vals <= 1) {
            return false;
        }
        $('#pics').val(parseInt(vals) - 1);
    }
</script>
</body>
</html>